﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SchoolGap.master" AutoEventWireup="true" CodeFile="NewSession.aspx.cs" Inherits="NewSession" %>


<asp:Content ID="Content0" ContentPlaceHolderID="Header" Runat="Server">

<!-- <script type="text/javascript" src="wizard/js/jquery-1.4.2.min.js"></script> -->
<link href="wizard/styles/smart_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="wizard/js/jquery.smartWizard-2.0.min.js"></script>


<!-- System JS-->
<script type="text/javascript" src="js/system/new_session.js"></script>




    
    <!--Calendar Plugin -->

    <link rel="stylesheet" media="screen" type="text/css" href="calendar/css/datepicker.css" />
    <script type="text/javascript" src="calendar/js/datepicker.js"></script>
    

    <script type="text/javascript">
        $(document).ready(function () {



            var output = '' + new Date().getMonth() + '/' + new Date().getDay() + '/' + new Date().getFullYear();
            $('#startdate').val(output);
            $('#enddate').val(output);

            $('#startdate').DatePicker({
                format: 'm/d/Y',
                date: $('#startdate').val(),
                current: $('#startdate').val(),
                starts: 1,

                onBeforeShow: function () {
                    $('#startdate').DatePickerSetDate($('#startdate').val(), true);
                },
                onChange: function (formated, dates) {
                    $('#startdate').val(formated);
                    $('#startdate').DatePickerHide();


                }
            });
            $(".startdate").click(function () { $('#startdate').DatePickerShow(); });



            $('#enddate').DatePicker({
                format: 'm/d/Y',
                date: $('#enddate').val(),
                current: $('#enddate').val(),
                starts: 1,

                onBeforeShow: function () {
                    $('#enddate').DatePickerSetDate($('#enddate').val(), true);
                },
                onChange: function (formated, dates) {
                    $('#enddate').val(formated);
                    $('#enddate').DatePickerHide();


                }
            });
            $(".enddate").click(function () { $('#enddate').DatePickerShow(); });
        });
    </script>

    <!--End Of Calendar Plugin -->


   



</asp:Content>


<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" Runat="Server">
<h1>Start New Session</h1>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">


<div id="wizard" class="swMain">
  <ul>
    <li><a href="#step-1">
          <label class="stepNumber">1</label>
          <span class="stepDesc">
             Session<br />
             <small>Current School Timeline</small>
          </span>
      </a></li>
    <li><a href="#step-2">
          <label class="stepNumber">2</label>
          <span class="stepDesc">
             Classes<br />
             <small>Name of Classes in School</small>
          </span>
      </a></li>
    <li><a href="#step-3">
          <label class="stepNumber">3</label>
          <span class="stepDesc">
             Subjects<br />
             <small>Subjects of Class</small>
          </span>                   
       </a></li>
    <li><a href="#step-4">
          <label class="stepNumber">4</label>
          <span class="stepDesc">
             Finish<br />
             <small>Thank You!</small>
          </span>                   
      </a></li>
      
  </ul>
  <div id="step-1">   
      <h2 class="StepTitle">Select Session's Start And End Date</h2>
       <!-- step content -->
       
      
      <table width="100%">
      
      <tr>
      <td>Start Date:</td>
      <td>End Date:</td>
      </tr>

      <tr>
      <td><input id="startdate" name="startdate" value="1/1/2013" /><span class="add-on startdate"><i class="icon-calendar"></i></span></td>
      <td><input id="enddate" name="enddate" value="1/1/2013" /><span class="add-on enddate"><i class="icon-calendar"></i></span></td>
      </tr>

      </table>

  </div>
  <div id="step-2">
      <h2 class="StepTitle">Add Class Names of the Current Session</h2> 
       <!-- step content -->
        
        <table width="100%">
        <tr><td>
        
         <input id="txtClassName" type="text" style="float:left" placeholder="Enter Class Name" />
       
            <a class="btn ui-state-default ui-corner-all"  onclick="AddClass()">
		    <span class="ui-icon ui-icon-plus"></span>Add Class
			</a>
        
        </td></tr>
        </table>



    

<div class="hastable">
<form name="myform" class="pager-form" method="post" action="#">
						<table id="ClassList" style="margin:0"> 
						<thead> 
						<tr>
							
						    <th>Class Name</th> 
							<th style="width:128px">Options</th> 
						</tr> 
						</thead> 
						<tbody> 
						<tr>
							 
						    <td>Doe</td> 
						    
						    <td>
								<a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Edit this Class" href="#">
									<span class="ui-icon ui-icon-wrench"></span>
								</a>
								
								
								<a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Delete this Class" href="#">
									<span class="ui-icon ui-icon-circle-close"></span>
								</a>
							</td>
						</tr> 
						
						
						
						</tbody>
						</table>
						
					</form>
</div>


       
  </div>                      
  <div id="step-3">
      <h2 class="StepTitle">Add Subject & Assign it to Class</h2>   
       <!-- step content -->

       <table width="100%">

       <tr>
       <td>Select Class:</td>
       <td><select><option>Class 1A</option><option>Class 1B</option></select></td>
       </tr>

       <tr>
       <td >Select Subject:</td>
       <td>
       <select onchange="SubjectChange()" id="SelectedSubject">
       <option>New</option>
       <option>English</option> 
       
       </select></td>
       </tr>
       

       <tr id="AddSubjectTr" >
       <td ></td>
       <td><input type="text" id="txtNewSubject" placeholder="Enter Subject Name"/></td>
       </tr>


        <tr  >
       <td ></td>
       <td>
        <a class="btn ui-state-default ui-corner-all"  onclick="AssignSubjectsToClass()">
		    <span class="ui-icon ui-icon-plus"></span>Assign</a>
       
       </td>
       </tr>

      

       </table>





  
<div class="hastable">
<form name="myform" class="pager-form" method="post" action="#">
						<table id="AssignedSubjects" style="margin:0"> 
						<thead> 
						<tr>
							
						    <th>Assigned Subjects</th> 
							<th style="width:128px">Options</th> 
						</tr> 
						</thead> 
						<tbody> 
						<tr>
							 
						    <td>Doe</td> 
						    
						    <td>
								<a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Edit this Class" href="#">
									<span class="ui-icon ui-icon-wrench"></span>
								</a>
								
								
								<a class="btn_no_text btn ui-state-default ui-corner-all tooltip" title="Delete this Class" href="#">
									<span class="ui-icon ui-icon-circle-close"></span>
								</a>
							</td>
						</tr> 
						
						
						
						</tbody>
						</table>
						
					</form>
</div>





  </div>
  <div id="step-4">
      <h2 class="StepTitle">Thank You</h2>   
       <!-- step content --> 
       
       <div style="height: 100px;text-align: center;padding-top: 50px;">
       Thank You for follwoing the step-by-step process, your system is now ready. You can start using it.<br />
       Click Finish to go to the Main Page.
       </div>
                               
  </div>
  
</div>


</asp:Content>

